<template>
	<view class="changeAlphabet">
		<view class="list"  >
			<view class="item" 
			v-for="(item,index) of city" 
			:key="index" 
			hover-class="hover"
			@click="click(item.initial)"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			>
				{{item.initial}}
			</view>
		</view>
	</view>
</template>

<script>
	var time=null;
	export default {
		name:"changeAlphabet",
		// 接收来自changeCity请求到的字母
		props:['city'],
		data() {
			return {
				touch:false
			};
		},
		methods:{
			click(res){
				// console.log(res)
				// 组件传值,参数为res请求到的字母
				this.$emit('change',res)
			},
			touchStart(){
				this.touch=true
			},
			
			touchMove(e){
				clearTimeout(time)
				time=setTimeout(()=>{
					if(this.touch){
						// console.log(e)
						// console.log(touchY)
						const touchY=e.changedTouches[0].pageY-150
						const index=Math.floor(touchY/15)
						// console.log(index)
						// console.log(this.city[index].initial)
						if(index>=0 && index<=this.city.length){
							this.$emit('change',this.city[index].initial)
						}
					}
				},30)
				
			},
			touchEnd(){
				this.touch=false
			}
		}
	}
</script>

<style>
	.changeAlphabet{
		position: fixed;
		top: 150px;
		right: 0px;
		z-index: 20;
		
	}
	.list{
		width: 30px;
	}
	.item{
		text-align: center;
		line-height: 15px;
		font-size: 12px;
		color: #FFFFFF;
	}
	.hover{
		text-align: center;
		line-height: 15px;
		font-size: 18px;
		color: #FFFFFF;
	}

</style>